<template>
    <div class="fullScreen">
        <div class='controls'>
            <img @click='goBack' src="../../image/exit_screen.png" width='17' alt="">
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '',
                playImg: require("../../image/play.png"),
                vdotime: {
                    currentTime: '',
                    allTime: '',
                },
                timeDrage: false,  //拖拽状态
                rangeVal: 0,  //input进度条初始值
                maxVal: '', //input进度条最大
                isShow: false,  //点击的是否是自定义控件 防止冒泡
            }
        },
        mounted() {
            this.$nextTick(function () {
                $('.controls').width($('.fullScreen').height() - 20);
            })
            this.showVideo();
        },
        methods: {
            goBack() {
                this.$router.back();
            },
            showVideo() {
                $('#video').show();
                $('#video').css({ 
                    'width': '100%',
                    'height': '100%', 
                });
                $('#video video').css({ 
                    'width': '100%',
                    'height': '100%', 
                    'transform':'rotate(90deg)',
                    '-ms-transform':'rotate(90deg)', 
                    '-moz-transform':'rotate(90deg)', 
                    '-webkit-transform':'rotate(90deg)', 
                    '-o-transform':'rotate(90deg)', 
                    'object-fit': 'none'
                });
            },
        },
        created() {
            
        },
        //离开路由触发
        beforeRouteLeave(to,from,next){//
            $('#video').css({height: '300px'});
            $('#video').hide();
            next();
        },
    }
</script>
<style lang="scss" scoped>
    #video {
        position: absolute !important;
        z-index: 1;
        left: 0;
        top: 0px;
        width: 100%; 
        height: 100%;
    }
    .pausecenter {
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%,calc(-50% - 10px))!important;
    }
    .fullScreen {
        width: 100%;
        height: 100%;
        position: relative;
        .controls {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            position: fixed;
            left: 0;
            top: 0;
            height: 40px;
            background: #000;
            opacity: .8;
            padding: 0 10px;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* Internet Explorer */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg); /* Opera */
            transform-origin: 20px 20px;
            -ms-transform-origin: 20px 20px; 		/* IE 9 */
            -webkit-transform-origin: 20px 20px;	/* Safari 和 Chrome */
            -moz-transform-origin: 20px 20px;		/* Firefox */
            -o-transform-origin: left center;		/* Opera */
            z-index:2;
            img { 
                margin: auto 0;
            }
        }
    }
</style>